<template>
  <div class="ActivityDetail">
    <!-- <van-nav-bar title="活动详情" left-arrow @click-left="backHome" /> -->
    <nav-bar :title="'活动详情'"></nav-bar>
    <div class="ActivityDetail-content wrap">
      <div class="ActivityDetail-content-title">{{activity.activityTable.title}}</div>
      <div class="ActivityDetail-content-note">
        <div class="date">
          {{activity.activityTable.startTime.split(" ")[0]}}至{{activity.activityTable.endTime.split(" ")[0]}}
          <br />
        </div>
      </div>
      <img :src="imgUrl+activity.activityTable.titleImg" alt class="ActivityDetail-content-img" />
      <!-- <div class="contentTitle"></div> -->
      <myTitle title="活动信息"></myTitle>
      <div class="applyInfo">
        <div>
          会议主办方：{{activity.activityTable.hostunit}}
          <br />
        </div>
        <div>
          活动举办地点：{{activity.activityTable.address + activity.activityTable.addressDetail}}
          <br />
        </div>
        <div>
          活动举办时间：{{activity.activityTable.startTime.split(" ")[0]}} 至{{activity.activityTable.endTime.split(" ")[0]}}
          <br />
        </div>

        <div>
          活动联系人：{{activity.activityTable.phone}}
          <br />
        </div>
        <div>联系方式：{{activity.activityTable.linkman}}</div>
        <div>
          报名时间：{{activity.activityTable.applyStartTime.split(" ")[0]}} 至{{activity.activityTable.applyEndTime.split(" ")[0]}}
          <br />
        </div>
        <div>
          报名费用：￥{{activity.activityTable.price}}元/人
          <br />
        </div>
        <div>当前报名人数：{{applyNumber}}</div>
      </div>
      <!-- <div class="contentTitle">签到二维码</div> -->
      <myTitle title="签到二维码"></myTitle>
      <div class="signQrcodeBox">
        <div class="signQrcodeItem" v-for="(item,index) in ticketList" :key="index">
          <div class="signQrcodeItemImg">
            <img :src="imgUrl+item.peapleQrCode" />
          </div>
          <div class="signQrcodeItemContent">
            <div class="signQrcodeItemContentName">姓名：{{item.persionName}}</div>
            <div class="signQrcodeItemContentPhone">手机号：{{item.persionPhone}}</div>
          </div>
        </div>
      </div>
      <!-- <div class="contentTitle">活动详情</div>
      <p class="ActivityDetail-content-txt rich" v-html="activity.activityTable.introduction"></p>
      <div
        class="contentTitle"
        v-show="activity.activityGuestList && activity.activityGuestList.length"
      >嘉宾信息</div>
      <div class="guest">
        <div class="guestItem" v-for="(item,index) in activity.activityGuestList" :key="index">
          <div class="guestImg">
            <img :src="imgUrl+item.guestImg" alt />
          </div>
          <div class="guestInfo">
            <div class="guestTitle">{{item.guestType}}: {{item.guestName}}</div>
            <div class="guestInfoText">{{item.guestText}}</div>
          </div>
        </div>
      </div>
      <div class="qrCode">
        <div class="codeImg">
          <img :src="imgUrl+activity.activityTable.activityQrcode" alt />
        </div>
        <div class="text">分享给好友</div>
      </div>-->
    </div>
    <!-- <div class="ActivityDetail-ad">
      <div class="ActivityDetail-ad-title">
        报名费用：￥
        <span>{{activity.activityTable.price}}</span>
      </div>
      <div class="ActivityDetail-ad-btn" @click="skipRouter({path:'/payTicket',query:{activityId:activityId}})">立即报名</div>
    </div>-->
  </div>
</template>
<script>
import navBar from '@/components/NavBar'
import myTitle from '@/components/myTitle/index.vue'
export default {
  components: {
    navBar,
    myTitle,
  },
  name: 'ActivityDetail',
  data() {
    return {
      activityId: '',
      activity: {
        activityTable: {
          startTime: '',
          endTime: '',
          applyStartTime: '',
          applyEndTime: '',
        },
        activityGuestList: [],
      },
      applyNumber: 0,
      imgUrl: config.imgUrl,
      showPort: {},
      ticketList: [],
    }
  },
  methods: {
    backHome() {
      this.$router.back()
    },
    skipRouter(routerObj) {
      this.$router.push(routerObj)
    },
    getActivityOne() {
      this.$request({
        url: '/activity/findActivityById',
        data: { activityId: this.activityId },
        method: 'post',
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.activity = rsp.data
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    findActivityTicketRestrict() {
      this.$request({
        url: '/activity/activityTicketRestrict',
        data: { activityId: this.activityId, flag: 0 },
        method: 'post',
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.applyNumber = rsp.data.numberOfEnrolment
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    findTicketList() {
      this.$request({
        url: '/activityTicket/activityTicketList',
        data: { activityId: this.activityId },
        method: 'post',
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.ticketList = rsp.data
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
  },
  mounted() {
    this.activityId = this.$route.query.activityId
    this.getActivityOne()
    this.findActivityTicketRestrict()
    this.findTicketList()
  },
}
</script>
<style scoped>
.rich >>> img {
  width: 100%;
  height: 100%;
}
</style>
<style lang='scss'>
@import '../assets/css/base';

.ActivityDetail {
  &-content {
    margin-bottom: px2rem(60);
    &-title {
      font-size: px2rem(40);
      color: #000000;
      font-weight: 500;
      margin: px2rem(44) auto px2rem(34);
      line-height: px2rem(52);
    }
    &-note {
      display: flex;
      margin-bottom: px2rem(20);
      & > .date {
        font-size: px2rem(28);
        color: rgba(0, 0, 0, 0.5);
        font-weight: 400;
      }
      & > .fire {
        @include bgImg(
          px2rem(130),
          px2rem(24),
          '../assets/img/activity/fire.png'
        );
        font-size: px2rem(24);
        background-position: left center;
        padding-left: px2rem(26);
        color: #ff2d5e;
        margin-left: px2rem(67);
        margin-bottom: px2rem(37);
      }
    }
    &-img {
      width: 100%;
      margin-bottom: px2rem(48);
    }
    &-txt {
      font-size: px2rem(24);
      color: #000000;
      line-height: 1.6;
      margin-bottom: px2rem(60);
    }
    .contentTitle {
      font-size: px2rem(36);
      color: $mainColor;
      margin: px2rem(20) 0;
    }
    .applyInfo {
      font-size: px2rem(32);
      color: #323233e0;
      & > div {
        line-height: px2rem(40);
      }
    }
    .guest {
      .guestItem {
        display: flex;
        margin-bottom: px2rem(20);
        .guestImg {
          width: 30%;
          & > img {
            width: px2rem(200);
            height: px2rem(200);
          }
        }
        .guestInfo {
          padding-left: px2rem(30);
          .guestTitle {
            font-size: px2rem(36);
          }
          .guestInfoText {
            padding-top: px2rem(20);
            font-size: px2rem(32);
          }
        }
      }
    }
    .qrCode {
      position: relative;
      text-align: center;
      .codeImg {
        & > img {
          width: px2rem(240);
          height: px2rem(240);
        }
      }
      .text {
        position: absolute;
        left: 0;
        right: 0;
        font-size: px2rem(32);
        top: px2rem(210);
      }
    }
    .signQrcodeBox {
      .signQrcodeItem {
        display: flex;
        background-color: #f1f1f1;
        border-radius: px2rem(10);
        margin-bottom: px2rem(20);
        .signQrcodeItemImg {
          width: 30%;
          padding-top: px2rem(10);
          padding-left: px2rem(10);
          & > img {
            width: px2rem(200);
            height: px2rem(200);
            object-fit: cover;
          }
        }
        .signQrcodeItemContent {
          font-size: px2rem(32);
          width: 70%;
          padding-left: px2rem(40);
          .signQrcodeItemContentName {
            margin: px2rem(50) 0;
          }
        }
      }
    }
  }
  &-ad {
    position: fixed;
    bottom: 0;
    // @include bgImg(100%, px2rem(90), "../assets/img/activity/ad-bg.png");
    width: 100%;
    background-color: #f1f1f1;
    height: px2rem(100);
    &-title {
      font-size: px2rem(28);
      color: #323233cc;
      position: absolute;
      left: 30%;
      top: 50%;
      transform: translate(-50%, -50%);
      & > span {
        color: red;
        font-size: px2rem(40);
      }
    }
    &-btn {
      position: absolute;
      right: 0;
      background: $mainColor;
      text-align: center;
      line-height: px2rem(100);
      font-size: px2rem(32);
      color: #fff;
      padding: 0px px2rem(40);
    }
  }
}
</style>
